// import liraries
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
  ToastAndroid,
  Text,
} from 'react-native';
import { Icon } from 'react-native-elements';

import {
  Navbar,
  Button,
  Actionsheet,
  Divider,
  HText,
} from '../../DodLibrary/index';

const H20 = HText.H20;

// create a component
class ActionSheetPage extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="ActionSheet"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />

        {/* simple one */}
        <Actionsheet
          ref={ref => { this._actionsheet1 = ref; }}
          title="Inuyasha"
          funcs={[
            () => ToastAndroid.showWithGravity('hello', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => ToastAndroid.showWithGravity('Inuyasha', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => ToastAndroid.showWithGravity('Kaggome', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => this._actionsheet1.hide(),
          ]}
          actions={[
            'hello',
            'Inuyasha',
            'Kaggome',
            'quit',
          ]}
        />
        {/* customize title */}
        <Actionsheet
          ref={ref => { this._actionsheet2 = ref; }}
          title={<Icon name="logo-google" type="ionicon" size={25} color="#e91e63" />}
          funcs={[
            () => ToastAndroid.showWithGravity('hello', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => ToastAndroid.showWithGravity('Inuyasha', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => ToastAndroid.showWithGravity('Kaggome', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => this._actionsheet2.hide(),
          ]}
          actions={[
            'hello',
            'Inuyasha',
            'Kaggome',
            'quit',
          ]}
        />
        {/* customize title and items */}
        <Actionsheet
          ref={ref => { this._actionsheet3 = ref; }}
          title={<Icon name="logo-google" type="ionicon" size={25} color="#e91e63" />}
          rippleColor="red"
          funcs={[
            () => ToastAndroid.showWithGravity('room', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => ToastAndroid.showWithGravity('refresh', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => ToastAndroid.showWithGravity('check', ToastAndroid.SHORT, ToastAndroid.CENTER),
            () => this._actionsheet3.hide(),
          ]}
          actions={[
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="room" size={30} color="cyan" />
              <Text style={{ marginLeft: 8 }}>room</Text>
            </View>,
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="refresh" size={30} color="yellow" />
              <Text style={{ marginLeft: 8 }}>refresh</Text>
            </View>,
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="check" size={30} color="green" />
              <Text style={{ marginLeft: 8 }}>check</Text>
            </View>,
            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
              <Icon name="close" size={30} color="red" />
              <Text style={{ marginLeft: 8 }}>close</Text>
            </View>,
          ]}
        />
        {/* total customize only use the component */}
        <Actionsheet
          ref={ref => { this._actionsheet4 = ref; }}
          buttonComponents={
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#fff',
              }}>
              <Icon
                name="spa"
                size={40}
                raised
                reverse
                color="green"
              />
            </View>
          }
        />

        <ScrollView>
          <H20>a simple actionsheet</H20>
          <Divider />
          <Button.Ripple
            onPress={() => this._actionsheet1.show()}>
            common actionsheet
          </Button.Ripple>
          <Divider />

          <H20>customize title</H20>
          <Divider />
          <Button.Ripple
            onPress={() => this._actionsheet2.show()}>
            customize title
          </Button.Ripple>
          <Divider />

          <H20>customize title and items</H20>
          <Divider />
          <Button.Ripple
            onPress={() => this._actionsheet3.show()}>
            customize title and items
          </Button.Ripple>
          <Divider />

          <H20>total customize only use the component</H20>
          <Divider />
          <Button.Ripple
            onPress={() => this._actionsheet4.show()}>
            total customize only use the component
          </Button.Ripple>
          <Divider />

        </ScrollView>
      </View>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

// make this component available to the app
export default ActionSheetPage;
